<template>
  <div id="bankcardinformmationsedit">
    <c-title :hide="false" text="银行卡信息"></c-title>
    <div class="bank-msg">
      <van-field 
        label="账户类型" 
        label-class="account-label" 
        placeholder="请输入银行卡卡号" 
        >
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="对公账户" v-if="toPublic" checked-color="var(--themeBaseColor)">对公账户</van-radio>
            <van-radio name="对私账户" v-if="toPrivate" checked-color="var(--themeBaseColor)">对私账户</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field 
        label="银行账号" 
        label-class="account-label" 
        placeholder="请输入银行卡卡号"
        :readonly="!status"
        v-model="receiverAccountNoEnc" 
        />
      <van-field 
        label="持卡人" 
        label-class="account-label" 
        placeholder="请输入持卡人名称"
        :readonly="!status"
        v-model="receiverNameEnc" 
        />
      <van-field 
        v-if="radio === '对公账户'"
        label="账户联行号" 
        label-class="account-label" 
        placeholder="对公账户必须填写"
        :readonly="!status"
        v-model="receiverBankChannelNo" 
        />
      <van-field 
        label="设为默认账户" 
        label-class="account-label" 
        placeholder="对公账户必须填写"
        class="default-val" 
        >
        <template #input>
          <van-switch  v-model="is_default" size="20px" active-color="var(--themeBaseColor)" />
        </template>
      </van-field>
    </div>
    <div class="bank-btn flex-j-sb"  @click="addTiJiao" :style="iPnoneBottomBol ? 'bottom: 88px;' : ''">
      <van-button type="default"  style="width:48%;border-radius: 21px;" @click.stop="deleteChange">删除账户</van-button>
      <van-button type="primary" color="var(--themeBaseColor)" style="width:48%;border-radius: 21px;" v-if="!status" @click.stop="change">点击修改</van-button>
      <van-button type="primary" color="var(--themeBaseColor)" style="width:48%;border-radius: 21px;" v-else @click.stop="addTiJiao">确认修改</van-button>
    </div>
  </div>
</template>
<script>
import bankcardinedit_controller from "./bankcardinedit_controller.js";
export default bankcardinedit_controller;
</script>
<style  lang="scss" rel="stylesheet/scss" scoped>
  ::v-deep .account-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
  }
  .pcStyle #bankcardinformmationsedit  .bank-btn {
    position: fixed;
    width: 375px;
    left:50%;
    bottom:50px;
    transform: translate(-50%, 0%);
    margin: 0 auto;
  }
  .bank-msg ::v-deep .van-radio__label {
    font-size: 13px;
    color: #00001C;
  }
  .bank-msg ::v-deep .van-radio-group--horizontal {
    flex:1;
    width:100%;
  }
  .default-val ::v-deep .van-field__control--custom {
    justify-content: flex-end;
  }
  .van-cell__value .van-radio {
    display: flex;
  }
  #bankcardinformmationsedit {
    .bank-msg {
      background: #FFFFFF;
      border-radius: 8px 8px 8px 8px;
      margin:10px 12px 0 12px;
      overflow: hidden;
    }
    .bank-btn {
      background: #FFFFFF;
      box-shadow: 0px 0 5px 1px #F5F5F5;
      border-radius: 0px 0px 0px 0px;
      position: fixed;
      bottom:50px;
      left:0;
      width: 100%;
      padding:10px 12px;
    }
    .van-radio {
      overflow: inherit;
    }
  }
</style>
